<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
	<table border="2" cellpadding="2px">
		<tr>
			<td>
				<!-- 这里的 $event 是将当前对象传入进去，具体详情请参照vue官方文档 -->
				<input type="checkbox" id="selectAll" v-on:click="selectAll($event)"/>全选
			</td>
			<td>
				商品
			</td>
			<td>
				单价
			</td>
			<td>
				数量
			</td>
			<td>
				删除
			</td>
		</tr>
	  <tr v-for="(object,index) in objects">
			<td>
				<input type="checkbox" v-model="dels" :value="object.id"/>
			</td>
			<td>
				{{ object.name}}
			</td>
			<td>
				{{ object.url }}
			</td>
			<td>
				<button v-on:click="lessen(index)">-</button><input type="text" size="1" v-model="object.slogan"><button v-on:click="increase(index)">+</button><button v-on:click="emprty(index)">清空</button>
			</td>
			<td>
				<button v-on:click="delo(object.id)">删除</button>
			</td>
	  </tr>
	</table>
	总价：{{total()}}<br>
	要删除的元素：{{dellist()}}<br>
	单选：{{delone}}
</div>

<script>
var $appVue = new Vue({
  el: '#app',
  data: {
    objects: [{
			id: 'IphoneX',
      name: '苹果X',
      url: '8000',
      slogan: '1'
    },{
			id: 'HuaWeiP30',
      name: '华为P30',
      url: '6000',
      slogan: '1'
    }],
		dels:[],
		delone: '',
		selectAllStatus: false
  },
	methods:{
		total: function(){
			var totalp = 0;
			for(var i=0;i<this.objects.length;i++){
				totalp+=this.objects[i].url*this.objects[i].slogan;
			}
			return totalp;
		},
		lessen: function(index){
			if(this.objects[index].slogan <=0){
				return;
			}else{
				this.objects[index].slogan--;
			}
		},
		increase: function(index){
			this.objects[index].slogan++;
		},
		emprty: function(index){
			this.objects[index].slogan=0;
		},
		dellist: function(){
			return this.dels;
		},
		delo: function(var1){
			this.delone = var1;
		},
		selectAll: function(event){
			if(event.currentTarget.checked){
					for(var i = 0; i < this.objects.length; i++){
						// 数组里没有这一个value才push，防止重复push
						if(this.dels.indexOf(this.objects[i].id) == '-1'){ 
						    this.dels.push(this.objects[i].id);
						}
					}
			}else{
				this.dels=[];
			}
		}
	},
	 watch: {
            dels: { // 监视双向绑定的数组变化
                handler(){
                    if(this.dels.length == this.objects.length){
                        document.querySelector('#selectAll').checked = true;
                    }else {
                        document.querySelector('#selectAll').checked = false;
                    }
                },
                deep: true
            }
  }
})
</script>
</body>
</html>